
<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>工器具清单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .app-container{
        padding: 15px 0;
      }
      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding: 20px;
        color: #333333;
      }
      .tool{
        display: flex;
        align-items: center;
        padding: 10px;
      }
      .tool span{
        display: block;
        background: #3188FE;
        border-radius: 2px;
        width: 5px;
        height: 10px;
        margin-right: 5px;
      }
      .mui-backdrop {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 998;
          background-color: rgba(0,0,0,.3);
      }
     
      table { background: #FFF; font-size: 14px; color: #333333;}
      td{ padding: 4px;}

      .flex{
        border-bottom: 1px solid #DCDCDC;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
      }
      .flex span:nth-child(1){
        font-weight: bold;
      }
      .flex span:nth-child(2){
        color: #3188FE;
      }

      .flex span:nth-child(2):after {
          font-size: 15px;
          right: 15px;
          content: '\e583';
          font-family: Muiicons;
          color: #bbb;
          margin-left: 5px;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">工器具清单</h1>
      </header>
      <div class="mui-content app-container" v-cloak> 
        <div class="tool"><span></span>工器具清单</div>
        <table style="width:100%;" cellpadding="4" cellspacing="0" border="1" bordercolor="#CCCCCC">
          <tbody>
            <tr>
              <td>序号</td>
              <td>编号</td>
              <td>工器具名称</td>
              <td>规格/型号</td>
            </tr>
            <tr v-for="(item,index) in deviceList.utensil" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.materialSpec}}</td>
            </tr>
            
          </tbody>
        </table>
        <div class="tool"><span></span>备品备件</div>
        <table style="width:100%;" cellpadding="4" cellspacing="0" border="1" bordercolor="#CCCCCC">
          <tbody>
            <tr>
              <td>序号</td>
              <td>编号</td>
              <td>工器具名称</td>
              <td>规格/型号</td>
              <td>数量</td>
            </tr>
            <tr v-for="(item,index) in deviceList.sparePart" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.specs}}</td>
              <td>{{item.quantity}}</td>
            </tr>
            
          </tbody>
        </table>
        <div class="tool"><span></span>耗材</div>
        <table style="width:100%;" cellpadding="4" cellspacing="0" border="1" bordercolor="#CCCCCC">
          <tbody>
            <tr>
              <td>序号</td>
              <td>编号</td>
              <td>工器具名称</td>
              <td>规格/型号</td>
              <td>数量</td>
            </tr>
            <tr v-for="(item,index) in deviceList.consumables" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.specs}}</td>
              <td>{{item.quantity}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../js/indexDBs.js"></script>
    <script type="text/javascript">
      mui.init()
      var id =0;
      var self = null;
      let lineType =null;
      let db={};
      const dbName = 'myDBs';// 数据库的名字
      const storeName = 'listPackage'; //仓库名称
      mui.plusReady(async function() {
        self = plus.webview.currentWebview()
        id= self.workId
        lineType = getSysInfo();
        // 打开数据库 const dbName = 'myDB', storeName = 'processPackage'
        await openDB(dbName, storeName, 1).then(res=>{
          console.log('111',res) 
          db=res;
        })
        // getProject()
        // let id = vm.getUrlParams('id') 
        console.log('idsssss',id)
        //是否离线
        if(!lineType){
          getLineData(id)
          return
        }
        vm.getDeviceList(id)
      })

      let vm = new Vue({
        el: '#container',
        data: {
          deviceList: {},
          tipsInfo: {}
        },
        created() {

        },
        mounted() {
          
        },
        methods: {
          getUrlParams(name) {
            var  reg = new  RegExp("(^|&)" + name + "=([^&]*)(&|$)");     
            var  r = window.location.search.substr(1).match(reg);     
            if(r != null) return   unescape(r[2]);
            return  null;
          },
          
          getDeviceList(id) {
            plus.nativeUI.showWaiting('加载中')
            mui.baseApp.httpRequst("get", "/app/api/project/execution/detail/" + id, {}, (data)=> {
              console.log(data)
              this.deviceList = data.data.deviceList
              plus.nativeUI.closeWaiting()
            }, ()=> {
              plus.nativeUI.closeWaiting()
              console.log("获取数据失败");
            })
          },
        }
      });
      
     function getProject(){
       console.log('mui')
     }
     // 获取离线数据
     function getLineData(taskId){
      getDataByKey(db, storeName,taskId).then(res=>{
        plus.nativeUI.closeWaiting()
        console.log('33300',JSON.stringify(res))
        vm.deviceList=res.deviceList
         
      })
          
     }
      function getSysInfo() {
          types = {};
          types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
          types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
          types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
          types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
          types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
       
          var str = types[plus.networkinfo.getCurrentType()];
          if (str == '未知' || str == '未连接网络') {
              return false;
          } else {
              return true;
          }
       
      }
    </script>
  </body>

</html>